<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon user-icon">
          <el-icon><User /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.userCount }}</div>
          <div class="stat-label">注册用户</div>
        </div>
        <div class="stat-trend">
          <span class="trend-up">+12%</span>
          <span class="trend-text">较上月</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon wheat-icon">
          <el-icon><Wheat /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.wheatCount }}</div>
          <div class="stat-label">检测样本</div>
        </div>
        <div class="stat-trend">
          <span class="trend-up">+8%</span>
          <span class="trend-text">较上月</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon report-icon">
          <el-icon><Document /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.reportCount }}</div>
          <div class="stat-label">检测报告</div>
        </div>
        <div class="stat-trend">
          <span class="trend-up">+15%</span>
          <span class="trend-text">较上月</span>
        </div>
      </div>
      
      <div class="stat-card">
        <div class="stat-icon quality-icon">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-number">{{ stats.qualityRate }}%</div>
          <div class="stat-label">优质率</div>
        </div>
        <div class="stat-trend">
          <span class="trend-up">+3%</span>
          <span class="trend-text">较上月</span>
        </div>
      </div>
    </div>
    
    <!-- 图表区域 -->
    <div class="charts-grid">
      <div class="chart-card">
        <div class="chart-header">
          <h3>检测数据趋势</h3>
          <el-select v-model="timeRange" size="small" style="width: 120px;">
            <el-option label="最近7天" value="7" />
            <el-option label="最近30天" value="30" />
            <el-option label="最近90天" value="90" />
          </el-select>
        </div>
        <div class="chart-placeholder">
          <el-icon><TrendCharts /></el-icon>
          <p>图表区域 - 检测数据趋势</p>
          <small>数据可视化功能开发中...</small>
        </div>
      </div>
      
      <div class="chart-card">
        <div class="chart-header">
          <h3>品质分布</h3>
        </div>
        <div class="chart-placeholder">
          <el-icon><PieChart /></el-icon>
          <p>图表区域 - 品质分布</p>
          <small>数据可视化功能开发中...</small>
        </div>
      </div>
    </div>
    
    <!-- 最近活动 -->
    <div class="recent-activities">
      <div class="section-header">
        <h3>最近活动</h3>
        <el-button type="text">查看全部</el-button>
      </div>
      
      <div class="activity-list">
        <div class="activity-item" v-for="activity in recentActivities" :key="activity.id">
          <div class="activity-icon" :class="activity.type">
            <el-icon><component :is="activity.icon" /></el-icon>
          </div>
          <div class="activity-content">
            <div class="activity-title">{{ activity.title }}</div>
            <div class="activity-time">{{ activity.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'Dashboard',
  setup() {
    const timeRange = ref('7')
    
    const stats = reactive({
      userCount: 1256,
      wheatCount: 3420,
      reportCount: 2890,
      qualityRate: 92.5
    })
    
    const recentActivities = ref([
      {
        id: 1,
        type: 'user',
        icon: 'User',
        title: '新用户注册：张三',
        time: '2分钟前'
      },
      {
        id: 2,
        type: 'wheat',
        icon: 'Wheat',
        title: '完成小麦品质检测：样本#2024001',
        time: '5分钟前'
      },
      {
        id: 3,
        type: 'report',
        icon: 'Document',
        title: '生成检测报告：报告#2024001',
        time: '10分钟前'
      },
      {
        id: 4,
        type: 'analysis',
        icon: 'TrendCharts',
        title: '数据分析完成：品质对比分析',
        time: '15分钟前'
      },
      {
        id: 5,
        type: 'system',
        icon: 'Setting',
        title: '系统配置更新：检测参数调整',
        time: '30分钟前'
      }
    ])
    
    return {
      timeRange,
      stats,
      recentActivities
    }
  }
}
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 16px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.wheat-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.report-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.quality-icon {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-content {
  flex: 1;
}

.stat-number {
  font-size: 28px;
  font-weight: 700;
  color: #333;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.stat-trend {
  text-align: right;
}

.trend-up {
  color: #52c41a;
  font-weight: 600;
  font-size: 14px;
}

.trend-text {
  color: #999;
  font-size: 12px;
  display: block;
  margin-top: 2px;
}

.charts-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

.chart-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.chart-placeholder {
  height: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #999;
  border: 2px dashed #e8e8e8;
  border-radius: 8px;
}

.chart-placeholder .el-icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: #ccc;
}

.chart-placeholder p {
  margin: 8px 0 4px 0;
  font-size: 16px;
}

.chart-placeholder small {
  font-size: 12px;
  color: #ccc;
}

.recent-activities {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  transition: background 0.2s;
}

.activity-item:hover {
  background: #f5f5f5;
}

.activity-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
}

.activity-icon.user {
  background: #1890ff;
}

.activity-icon.wheat {
  background: #52c41a;
}

.activity-icon.report {
  background: #722ed1;
}

.activity-icon.analysis {
  background: #fa8c16;
}

.activity-icon.system {
  background: #eb2f96;
}

.activity-content {
  flex: 1;
}

.activity-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .charts-grid {
    grid-template-columns: 1fr;
  }
  
  .chart-placeholder {
    height: 200px;
  }
}
</style>
